---
# title: "Install Tailwind CSS with Nuxt.js"
title: "在 Nuxt.js 中安装 Tailwind CSS"
# description: "Setting up Tailwind CSS in a Nuxt.js project."
description: "在 Nuxt.js 工程中配置 Tailwind CSS。"
tool: Nuxt.js
---


```preval installation
reference:
  name: Create Nuxt App
  link: https://nuxtjs.org/guides/get-started/installation#using-create-nuxt-app
script: npx create-nuxt-app
disclaimer: >
  **当提示您选择" UI 框架"时，请不要选择 "Tailwind CSS"**。
  这将导致冲突，使您无法安装 Tailwind CSS v2.0，因为`@nuxtjs/tailwindcss` 模块依赖旧版本的 Tailwind。
```

---

```preval setup
dev: true
version: 
  Nuxt.js: compat-7
uninstall:
  - '@nuxtjs/tailwindcss'
  - tailwindcss
dependencies:
  - '@nuxtjs/tailwindcss'
```

<!-- Add the `@nuxtjs/tailwindcss` module to the `buildModules` section of your `nuxt.config.js` file: -->
将 `@nuxtjs/tailwindcss` 模块添加到您的 `nuxt.config.js` 文件的 `buildModules` 部分。

```js
// nuxt.config.js
export default {
  buildModules: ['@nuxtjs/tailwindcss']
}
```

```preval configuration
postcss: false
purge:
  - ./components/**/*.{vue,js}
  - ./layouts/**/*.vue
  - ./pages/**/*.vue
  - ./plugins/**/*.{js,ts}
  - ./nuxt.config.{js,ts}
```

```preval include
file: ./assets/css/tailwind.css
```

---

```preval finish
scripts:
  - npm run dev
```

